<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统 - 订单详情</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        body {
            padding-top: 56px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .sidebar {
            min-height: calc(100vh - 56px);
            position: fixed;
            top: 56px;
            left: 0;
            width: 200px;
            z-index: 100;
            padding: 20px 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
            background-color: #343a40;
        }
        .sidebar .nav-link {
            color: #ddd;
            padding: 0.5rem 1rem;
        }
        .sidebar .nav-link:hover {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.1);
        }
        .sidebar .nav-link.active {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.2);
        }
        .sidebar .nav-link i {
            margin-right: 8px;
        }
        .main-content {
            margin-left: 200px;
            padding: 20px;
            flex: 1;
        }
        .product-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
        }
        .status-badge {
            display: inline-block;
            min-width: 80px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/admin">
            <i class="fas fa-dumbbell"></i> 体育商城后台管理
        </a>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-user-shield"></i> 管理员
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="${pageContext.request.contextPath}/" target="_blank">
                        <i class="fas fa-store"></i> 访问商城
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="${pageContext.request.contextPath}/admin/logout">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </div>
            </li>
        </ul>
    </nav>

    <!-- 侧边栏 -->
    <jsp:include page="sidebar.jsp" />

    <!-- 主要内容 -->
    <div class="main-content">
        <div class="container-fluid">
            <!-- 标题行 -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <h2 class="mb-1">订单详情</h2>
                    <p class="text-muted">订单号: ${order.orderNo}</p>
                </div>
                <div class="col-md-6 text-right">
                    <a href="${pageContext.request.contextPath}/admin/orders" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> 返回订单列表
                    </a>
                    <c:if test="${order.status == 20}">
                        <button id="shipOrderBtn" class="btn btn-primary ml-2">
                            <i class="fas fa-shipping-fast"></i> 发货
                        </button>
                    </c:if>
                </div>
            </div>
            
            <!-- 订单信息卡片 -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">订单信息</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <strong>订单状态:</strong>
                                    <c:choose>
                                        <c:when test="${order.status == 10}">
                                            <span class="badge badge-warning status-badge">未付款</span>
                                        </c:when>
                                        <c:when test="${order.status == 20}">
                                            <span class="badge badge-info status-badge">已付款</span>
                                        </c:when>
                                        <c:when test="${order.status == 30}">
                                            <span class="badge badge-primary status-badge">已发货</span>
                                        </c:when>
                                        <c:when test="${order.status == 40}">
                                            <span class="badge badge-success status-badge">已完成</span>
                                        </c:when>
                                        <c:when test="${order.status == 50}">
                                            <span class="badge badge-secondary status-badge">已关闭</span>
                                        </c:when>
                                        <c:otherwise>
                                            <span class="badge badge-dark status-badge">未知状态</span>
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <strong>支付方式:</strong>
                                    <span>${order.paymentType == 1 ? '在线支付' : '未知方式'}</span>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <strong>订单金额:</strong>
                                    <span class="text-danger">￥${order.payment}</span>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <strong>用户ID:</strong>
                                    <span>${order.userId}</span>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <strong>运费:</strong>
                                    <span>￥${order.postage}</span>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <strong>创建时间:</strong>
                                    <span><fmt:formatDate value="${order.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
                                </div>
                                <c:if test="${order.paymentTime != null}">
                                    <div class="col-md-4 mb-3">
                                        <strong>支付时间:</strong>
                                        <span><fmt:formatDate value="${order.paymentTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
                                    </div>
                                </c:if>
                                <c:if test="${order.sendTime != null}">
                                    <div class="col-md-4 mb-3">
                                        <strong>发货时间:</strong>
                                        <span><fmt:formatDate value="${order.sendTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
                                    </div>
                                </c:if>
                                <c:if test="${order.endTime != null}">
                                    <div class="col-md-4 mb-3">
                                        <strong>完成时间:</strong>
                                        <span><fmt:formatDate value="${order.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
                                    </div>
                                </c:if>
                                <c:if test="${order.closeTime != null}">
                                    <div class="col-md-4 mb-3">
                                        <strong>关闭时间:</strong>
                                        <span><fmt:formatDate value="${order.closeTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
                                    </div>
                                </c:if>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 收货信息卡片 -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">收货信息</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <strong>收货人:</strong>
                                    <span>${order.receiverName}</span>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <strong>联系电话:</strong>
                                    <span>${order.receiverPhone}</span>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <strong>邮政编码:</strong>
                                    <span>${order.receiverZip}</span>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <strong>收货地址:</strong>
                                    <span>${order.receiverProvince} ${order.receiverCity} ${order.receiverDistrict} ${order.receiverAddress}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 商品列表卡片 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">商品明细</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th style="width: 80px">商品图</th>
                                            <th>商品名称</th>
                                            <th>单价</th>
                                            <th>数量</th>
                                            <th>小计</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:forEach items="${order.orderItemVOList}" var="item">
                                            <tr>
                                                <td>
                                                    <img src="${item.productImage}" alt="${item.productName}" class="product-image">
                                                </td>
                                                <td>${item.productName}</td>
                                                <td>￥${item.currentUnitPrice}</td>
                                                <td>${item.quantity}</td>
                                                <td>￥${item.totalPrice}</td>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="4" class="text-right">
                                                <strong>商品总价:</strong>
                                            </td>
                                            <td>￥${order.payment}</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery 和 Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 发货按钮
            $('#shipOrderBtn').click(function() {
                if (confirm('确定要为订单 ${order.orderNo} 发货吗？')) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/admin/orders/ship/${order.orderNo}",
                        type: "POST",
                        success: function(res) {
                            if (res.code === 200 || res.success === true) {
                                alert("发货成功");
                                window.location.reload();
                            } else {
                                alert("发货失败: " + (res.message || res.msg));
                            }
                        },
                        error: function() {
                            alert("发货失败，服务器错误");
                        }
                    });
                }
            });
        });
    </script>
</body>
</html> 